<template>
  <div style="height: calc(100vh - 90px)">
    <div class="container-card">
      <el-card
        v-for="(item, index) in props.softwareData"
        :key="index"
        shadow="never"
        class="card-item"
        header-class="card-button"
        @click.stop="handleCardClick(item)"
      >
        <!--      <template #header>-->
        <!--        <el-checkbox-->
        <!--          v-model="item.checked"-->
        <!--          @change="(checked: boolean) => handleCheckboxChange(checked, item)"-->
        <!--          @click.stop-->
        <!--        ></el-checkbox>-->
        <!--      </template>-->

        <div class="card-body">
          <img src="@/assets/image%2021.svg" width="100%" />
        </div>

        <template #footer>
          <div class="card-footer">
            <div class="card-footer-line">
              <span class="software-name">{{ item.name }}</span>
              <div>
                <el-button
                  text
                  :icon="MoreFilled"
                  @click.stop="changeActionsPopup"
                ></el-button>
              </div>
            </div>
            <div class="card-footer-description">
              <img
                v-if="item.endDate"
                src="@/assets/1.png"
                class="icon"
                alt=""
              />
              <span class="description"
                >{{ item.projectManager }} 创建于{{ item.startDate }}</span
              >
            </div>
          </div>
        </template>
      </el-card>
    </div>
    <MoreActionsPopup
      :visible="showMoreActionsPopup"
      :position="moreActionsPopupPosition"
      :actions="moreActions"
    ></MoreActionsPopup>
  </div>
</template>

<script lang="ts" setup>
  import { computed, onBeforeUnmount, onMounted, ref } from "vue";
  import type { DynamicField } from "@/components/CLTable/interface.ts";
  import type { ProjectNode } from "@/data/wbsData.ts";
  import MoreActionsPopup from "@/components/MoreActionsPopup.vue";
  import { MoreFilled } from "@element-plus/icons-vue";
  interface UseSoftwareProps {
    fields: DynamicField[];
    softwareData: ProjectNode[];
    cardConfig: Record<string, any>;
  }
  // 定义事件发射器
  const emit = defineEmits<{
    (event: "selection-change", data: ProjectNode | undefined): void;
    (event: "selection-view", data: ProjectNode): void;
  }>();
  const props = defineProps<UseSoftwareProps>();
  const selectedData = ref<ProjectNode | undefined>();
  const showMoreActionsPopup = ref(false);
  const moreActionsPopupPosition = ref({ left: 0, top: 0 });
  const moreActions = computed(() => props.cardConfig.moreActions || []);
  // 处理复选框变化
  // const handleCheckboxChange = (
  //   checked: boolean | string | number,
  //   item: ProjectNode,
  // ) => {
  //   if (checked) {
  //     props.softwareData.forEach((softwareItem) => {
  //       if (softwareItem !== item) {
  //         softwareItem.checked = false;
  //       }
  //     });
  //     selectedData.value = item;
  //   } else {
  //     // 从选中数据中移除
  //     selectedData.value = undefined;
  //   }
  //   // 触发自定义事件，将选中数据传递给父组件
  //   emit("selection-change", selectedData.value);
  // };
  const handleCardClick = (item: ProjectNode) => {
    console.log("卡片被点击:", item);
  };
  const changeActionsPopup = (e: MouseEvent) => {
    console.log("设置被点击", e);
    e.stopPropagation();
    // 打开弹窗（如果未显示）
    if (!showMoreActionsPopup.value) {
      showMoreActionsPopup.value = true;
    }

    // 等待 DOM 渲染完成后计算实际宽高
    requestAnimationFrame(() => {
      const popup = document.querySelector(
        ".more-actions-popup",
      ) as HTMLElement;
      const popupWidth = popup?.offsetWidth || 200; // 默认宽度
      const popupHeight = popup?.offsetHeight || 150; // 默认高度
      const viewportWidth = window.innerWidth;
      const viewportHeight = window.innerHeight;

      let left = e.clientX;
      let top = e.clientY + 8; // 稍微往下偏移一点

      // 水平防撞：若超出右侧，贴右边显示
      if (left + popupWidth > viewportWidth) {
        left = viewportWidth - popupWidth - 10;
      }
      if (left < 0) left = 10;

      // 垂直防撞：若超出底部，向上显示
      if (top + popupHeight > viewportHeight) {
        top = e.clientY - popupHeight - 8;
        if (top < 0) top = 10;
      }

      moreActionsPopupPosition.value = { left, top };
    });
  };

  const hidePopup = () => {
    console.log("隐藏被点击");
    showMoreActionsPopup.value = false;
  };
  onMounted(() => {
    document.addEventListener("click", hidePopup);
  });
  onBeforeUnmount(() => {
    document.removeEventListener("click", hidePopup);
  });
</script>
<style scoped lang="scss">
  :deep(.card-button) {
    height: 30px;
    margin: 0;
    display: flex;
    align-items: center;
    border-bottom: 0;
  }
  :deep(.el-card__footer) {
    padding: 10px;
    height: 72px;
    width: 280px;
  }
  :deep(.el-card__body) {
    margin: 0;
    padding: 0;
  }
  :deep(.card-footer) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0;
    column-gap: 5px;
  }
  :deep(.el-button) {
    height: 24px;
    width: 20px;
    padding: 4px;
  }
  .software-name {
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    color: #333;
    width: auto;
    display: flex;
    justify-content: center;
  }
  .card-body {
    display: flex;
    justify-content: center;
    height: 155px;
    width: 280px;
  }
  .description {
    font-size: 12px;
    width: auto;
    display: flex;
    justify-content: center;
    font-weight: 400;
    color: #999999;
  }
  .container-card {
    margin: 10px 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); // 自动换行
    gap: 16px; // 卡片间距
  }
  .card-item {
    height: 230px;
    width: 280px;
  }
  .card-item:hover {
    cursor: pointer;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
  }
  .card-footer-line {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
  }
  .card-footer-description {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }
  .icon {
    width: 16px;
    height: 16px;
  }
</style>
